import './Architect.css'
import './Responsive.css'
import Test1 from '../../../../../../assets/1.svg'
import Test2 from '../../../../../../assets/2.svg'
import Test3 from '../../../../../../assets/3.svg'
import Test4 from '../../../../../../assets/4.svg'
import Test5 from '../../../../../../assets/5.svg'
import Test6 from '../../../../../../assets/game.svg'
import BriefAritleData from "./list-article-data/BriefArticleData";

const PieceList = () => {
    const articleIcon = [Test1, Test2, Test3, Test4, Test5, Test6];
    return (
        <div className='piece-list'>
            {articleIcon.map((icon, index) => {

                const text = "国内有些地区访问有些问题，而且问题日益严重，最近手机更新一些开源软件总是没法正常下载，脑壳疼。本文分享一些GitHub镜像网" +
                    "而且问题日益严重，最近手机更新一些开源软件总是没法正常下载，脑壳疼。本文分享一些镜像网" +
                    "国内有些地区访问GitHub有些问题，而且问题日益严重，最近手机更新一些开源软件总是没法正常下载，脑壳疼。本文分享一些GitHub镜像网";
                const truncatedText = text.length > 150 ? text.slice(0, 90) + '...' : text;

                return (
                    <div className='list-article-entrance' key={index}>
                        <a href="/home-page" className="list-article-link">
                            <img src={icon} alt={`Article ${index + 1}`} className="list-article-icon" />
                        </a>
                        <div className='list-article-brief'>
                            <a href="/home-page" className="list-article-link">
                                <span className='list-article-title'>时间铭记的歌</span>
                            </a>
                            <span className='list-article-body'>{truncatedText}</span>
                            <div className='list-brief-article-data'>
                                <BriefAritleData />
                            </div>
                        </div>
                    </div>
                );
            })}
        </div>
    );
};

export default PieceList;
